{template 'header'}
<!--引入的外部的icon图标-->
<link rel="stylesheet" type="text/css" href="{MODULE_URL}assets/css/icons-extra.css" />
<style>
    * {
        touch-action: pan-y;
    }
    .medai_list .tish {
        position: absolute;
        right: 10px;
        bottom: 33px;
    }
    #main{
        padding-bottom: 1rem;
    }
    #nnav .mui-media-body p{
        font-size: .78rem;
    }
    #slider .mui-slider-item img{
        height: 28vh;
    }
    .mui-table-view .mui-media-object{
        width: 16vw;
        height: 16vw;
        max-width: 16vw;
    }
    #slider{
        background: #fff;
    }
    .inform{
        width: 100vw;
        background: #fff;
        padding-bottom: 1vh;
        position: relative;
        border-bottom:1px solid #e4e4e4;
    }
    .inform ul {
        list-style: none;
        margin: 0;
    }
    .inform i{
        position: absolute;
        left: 3vw;
        top: 0.3vh;
    }
    .inform i img{
        width: 5vw;
    }
    .inform ul li a{
        font-size: 14px;
        margin-top: 0;
        color: #8f8f94;
        padding-left: 10vw;
        display: block;
        width: 90vw;
    }
    #nnav{
        background: #fff;
        border: none;
    }
    #nnav li{
        border: none;
        padding: 0 15px;
    }
    #nnav img{
        width: 10vw;
    }
    #medai_list{
        background: none;
        padding: 0 1vh;
    }
    #medai_list li{
        background: #fff;
        margin-top: 1vh;
    }
    .mui-table-view:before{
        background-color: #efeff4;
    }
    #medai_list li h4{
        font-size: 14px;
        color: #051d7a;
    }
    #medai_list li a>img{
        border-radius: 6px;
    }
    #medai_list li h6 , #medai_list li p{
        font-size: 12px;
    }
    #medai_list li h6{
        width: 100%;
        /*white-space: normal;*/
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #medai_list li span{
        border: 1px solid #ccc;
        padding: 2px;
    }
</style>
</head>
<body>
<div class="mui-content mui-scroll-wrapper" id="main">
    <div class="mui-scroll">
        <!-- slide开始 -->
        <div class="mui-slider" id="slider">
            <div class="mui-slider-group mui-slider-loop">
                <div class="mui-slider-item mui-slider-item-duplicate"><img src="{php echo $sliderarr[count($sliderarr)-1]}"></div>
                {loop $sliderarr $item}
                    <div class="mui-slider-item"><img src="{$item}"></div>
                {/loop}
                <div class="mui-slider-item mui-slider-item-duplicate"><img src="{php echo $sliderarr[0]}"></div>
            </div>
            <div class="mui-slider-indicator">
                {loop $sliderarr $item}
                <div class="mui-indicator {if $index==0}mui-active{/if}"></div>
                {/loop}
            </div>
        </div>
        <!--slide 结束-->
        <!--通知开始-->
        <div class="inform">
            <i><img src="{MODULE_URL}assets/img/inform.png" alt=""></i>
            <div class="bd">
                <ul class="super_link">
                    {loop $noteres $note}
                    <li><a href="#">{$note['title']}</a></li>
                    {/loop}
                </ul>
            </div>
        </div>
        <!--通知结束-->
        <!-- nav开始 -->
        <nav>
            <ul class="mui-table-view mui-grid-view mui-grid-9 super_link" id="nnav">
                <li class='mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3'>
                    <a href="{php echo $this->createMobileUrl('index',['op'=>'page','extra'=>'new_introduce'])}">
                        <img src="{MODULE_URL}assets/img/xinrenyindao.png">
                        <div class="mui-media-body"><p>新人引导</p></div>
                    </a>
                </li>
                <li class='mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3'>
                    <a href="{php echo $this->createMobileUrl('index',['op'=>'page','extra'=>'project_introduce'])}">
                        <img src="{MODULE_URL}assets/img/xiangmujieshao.png">
                        <div class="mui-media-body"><p>项目介绍</p></div>
                    </a>
                </li>
                <li class='mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3'>
                    <a href="{php echo $this->createMobileUrl('index',['op'=>'page','extra'=>'cooperate'])}">
                        <img src="{MODULE_URL}assets/img/hezuozhaoshang.png">
                        <div class="mui-media-body"><p>合作招商</p></div>
                    </a>
                </li>
                <li class='mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3'>
                    <a href="{php echo $this->createMobileUrl('index',['op'=>'page','extra'=>'about_us'])}">
                        <img src="{MODULE_URL}assets/img/guanyuwomen.png">
                        <div class="mui-media-body"><p>关于我们</p></div>
                    </a>
                </li>
            </ul>
        </nav>
        <!-- nav结束 -->
        <!-- 图文列表开始 -->
        <div class="medai_list">
            <ul class="mui-table-view mui-table-view-chevron super_link" id="medai_list">
                <!--插入li列表-->
            </ul>
        </div>
        <!-- 图文列表结束 -->
    </div>
</div>
<script id="task-item" type="text/html">
    {{each list}}
    <li class="mui-table-view-cell mui-media">
        <a href="{{$value.jumpurl}}" class="">
        <img src="{{$value.thumb}}" class="mui-media-object mui-pull-left">
        <div class="mui-media-body">
            <h4>{{$value.title}}</h4>
<!--            <p>已抢:<b class='mui-badge mui-badge-inverted mui-badge-danger'>{{$value.receive_num}}</b>/<b class="mui-badge mui-badge-warning mui-badge-inverted">{{$value.release_num}}</b></p>-->
            <h6>{{$value.remark}}</h6>
            <p><span>{{$value.task_money}}元</span> <span>{{$value.task_status}}</span></p>
            <div class="mui-badge mui-badge-primary tish">{{$value.user_task_status}}</div>
        </div>
        </a>
        </li>
    {{/each}}
</script>
<!-- 底部Tab 开始 -->
{template 'nav'}
<!-- 底部Tba 结束 -->
<script src="{MODULE_URL}assets/js/jquery.min.js"></script>
<script src="{MODULE_URL}assets/js/mui.min.js"></script>
<script src="{MODULE_URL}assets/js/template-web.js"></script>
<script src="{MODULE_URL}assets/js/jquery.SuperSlide.2.1.3.js"></script>
<!-- 以上为引入第三方插件 -->
<script src="{MODULE_URL}assets/js/public.js"></script>
<script type="text/javascript">
    //通知效果
    jQuery(".inform").slide({
        mainCell:".bd ul",
        autoPage:true,
        effect:"topLoop",
        autoPlay:true,
        mouseOverStop:false
    });
    //初始化 mui 轮播效果
    mui('#slider').slider({
        interval: 1500 // slider间隔时间
    });
    var page = 1;
    var list_url = '{php echo $this->createMobileUrl("index",array("op"=>"index","extra"=>"list"))}';
    mui.ajax(list_url,{
        data:{page:1},
        dataType:'json',//服务器返回json格式数据
        type:'post',//HTTP请求类型
        async: false,
        timeout:10000,//超时时间设置为10秒；
        success:function(ret){
            var data = {
                list: ret.data
            };
            var html = template('task-item', data);
            $('#medai_list').html(html);
        },
        error:function(xhr,type,errorThrown){
            //异常处理；
            mui.alert(errorThrown);
        }
    });
    //初始化Mui
    mui.init({
        pullRefresh: {
            container: "#main",
            // 下拉刷新
            down: {
                style: 'circle',
                callback: function () {
                    setTimeout(function () {
                        mui('#main').pullRefresh().endPulldownToRefresh();
                        mui.ajax(list_url,{
                            data:{page:1},
                            dataType:'json',//服务器返回json格式数据
                            type:'post',//HTTP请求类型
                            async: false,
                            timeout:10000,//超时时间设置为10秒；
                            success:function(ret){
                                var data = {
                                    list: ret.data
                                };
                                var html = template('task-item', data);
                                $('#medai_list').html(html);
                            },
                            error:function(xhr,type,errorThrown){
                                //异常处理；
                                mui.alert(errorThrown);
                            }
                        });
                    }, 1500);
                }
            },
            // 上拉加载
            up: {
                contentrefresh: "正在加载...",
                contentnomore: "没有更多数据了",
                callback: function (e) {
                    setTimeout(function () {
                        page ++;
                        mui.ajax(list_url,{
                            data:{page:page},
                            dataType:'json',//服务器返回json格式数据
                            type:'post',//HTTP请求类型
                            async: false,
                            timeout:10000,//超时时间设置为10秒；
                            success:function(ret){
                                if(ret.data.length>0){
                                    var data = {
                                        list: ret.data
                                    };
                                    mui('#main').pullRefresh().endPullupToRefresh(false); //有数据穿 false 反之 true
                                    var html = template('task-item', data);
                                    $('#medai_list').append(html);
                                }else{
                                    page--;
                                    mui('#main').pullRefresh().endPullupToRefresh(true); //有数据穿 false 反之 true
                                }
                            },
                            error:function(xhr,type,errorThrown){
                                //异常处理；
                                mui.alert(errorThrown);
                            }
                        });
                    }, 1500)
                }
            }
        }
    });
</script>
</body>
</html>